<template>
  <div v-if="content === 0 || getContent()" class="tooltip-container">
    <el-tooltip :open-delay="showMobilePage ? 100 : 800" :placement="placement">
      <div slot="content" style="max-width:200px;">
        <span v-if="dangerouslyUseHtml" class="tooltip-scroll" v-html="toolTip || getContent()"/>
        <span v-else>
          {{ toolTip || getContent() }}{{ unit }}
          <el-button
            v-if="showCopyBtn"
            type="text"
            size="small"
            style="padding: 0; font-size: 12px"
            @click="tooltipContentCopy(toolTip || getContent(), unit)"
          >复制</el-button>
        </span>
      </div>
      <slot v-if="$slots.default" />
      <img v-else-if="icon" :src="icon" class="img-icon" alt="">
      <div v-else-if="extendIcon" class="tooltip-flex">
        <img :src="extendIcon" class="extend-img-icon" alt="">
        <div :class="{ 'multi-ellipsisOne': lineNum > 1 }" :style="dynamicSty" class="ellipsisOne">{{ getContent() }}{{ unit }}</div>
      </div>
      <div v-else :class="{'is-can-click':isCanClick, 'multi-ellipsisOne': lineNum > 1 }" :style="dynamicSty" class="ellipsisOne" @click="handelClick">{{ getContent() }}{{ unit }}</div>
    </el-tooltip>
  </div>
  <div v-else-if="isShowDefault">--</div>
</template>

<script>
import { mapState } from 'vuex';
import { isEmpty } from '@/utils/tools';
export default {
  props: {
    content: {
      type: String | Number,
      default: ''
    },
    toolTip: {
      type: String | Number,
      default: ''
    },
    placement: {
      type: String,
      default: 'top'
    },
    labelKey: {
      type: String,
      default: 'name'
    },
    type: {
      type: String,
      default: ''
    },
    isCanClick: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    extendIcon: {
      type: String,
      default: ''
    },
    lineNum: {
      type: Number,
      default: 1
    },
    isShowDefault: {
      type: Boolean,
      default: true
    },
    dangerouslyUseHtml: {
      type: Boolean,
      default: false
    },
    showCopyBtn: {
      type: Boolean,
      default: true
    },
    unit: {
      type: String,
      default: ''
    },
    labelStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dynamicSty() {
      return {
        ...this.labelStyle,
        '-webkit-line-clamp': this.lineNum // 这里是超出几行省略
      };
    }
  },
  methods: {
    getContent() {
      if (this.type === 'arr') {
        if (this.content && this.content.length) {
          return this.content.map(i => i[this.labelKey]).join(',');
        }
        return '';
      }
      if (!this.content && this.content !== 0) return '';
      return this.content;
    },
    handelClick(e) {
      if (this.isCanClick) {
        this.$emit('handelClick', e);
      }
    },
    tooltipContentCopy(val, unit = null) {
      if (isEmpty(val)) return;
      const copyVal = val + (unit || '');
      this.$copyText(copyVal).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tooltip-container {
  display: flex;
  max-width: 100%;
}
.img-icon {
  width: 15px;
  height: 15px;
}
.extend-img-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.tooltip-flex {
  display: flex;
  align-items: center;
  width: 100%;
}
.is-can-click {
  cursor: pointer;
  color: #406eff;
}
.multi-ellipsisOne {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal !important;
}
.tooltip-scroll {
  @include scrollBar($x:hidden, $y: auto,$width: 3px);
  max-height: 200px;
  white-space: pre-wrap;
  display: block;
  padding-right: 2px;
}
</style>
